@unit:375./100vw;

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.from {
    width: 100%;

}

.left {
    width: 120./@unit;
    height: 700./@unit;
    // background-color: rgb(157, 255, 0);
    float: left;
}

ul {
    li {
        width: 120./@unit;
        height: 100./@unit;
        // background-color: aquamarine;
         margin-top: 20./@unit;
         text-align: center;
        border-radius: 30./@unit;
        box-shadow: 0 2./@unit 4./@unit rgba(0, 0, 0, 0.1);
        border: 1./@unit solid white;
    }

    img {
        margin-top: 20./@unit;
    }
    a {
        display: block;
        font-size: 15./@unit;
    }
}
li:hover{
    border: 1./@unit solid aqua;
}
.right{
    width: 220./@unit;
    box-shadow: 0 2./@unit 4./@unit rgba(0, 0, 0, 0.1);
    margin-top: 30./@unit;
    img{
        width: 100./@unit;
        height: 130./@unit;
        float: left;

    }
}
.abbr{
   
    span{
        font-size: 16./@unit;
        margin-left:10./@unit;
    }
    p{
        font-size: 12./@unit;
        margin-left:10./@unit;
        color: gray;
    }
    .photo{
        margin-top: 20./@unit;
        margin-left:10./@unit;
    }
    .text {
        font-size: 14./@unit;
        color: orange;
        line-height: 30./@unit;
        margin-top: 5./@unit;
    }
    .smear{
        float: right;
    }
    .one{
        font-size: 10./@unit;
        margin-left: -7./@unit;
    }
}
